﻿/// <reference path="jquery-1.10.2.js" />
/// <reference path="jquery-ui-1.10.4.custom.min.js" />
/// <reference path="jquery.mousewheel.js" />

(function (jQuery) {
    $ = $ === undefined ? jQuery : $;

    if (!$.isFunction(String.prototype.format)) {
        $.extend(String.prototype, {
            format: function (params) {
                var j = $.makeArray(params);
                return this.replace(/\{\d+\}/g, function (i, c) {
                    return j[c];
                });
            }
        });

        $.extend(String, {
            format: function (str, params) {
                return str.format($.makeArray(arguments).slice(1));
            }
        });
    }

    $.widget("net.scrollable", {
        container: null,
        options: {
            height: 'auto',
            width: 'auto',
            columns: 1,
            max: 0,
            step: 10,
            interval: 50,
            data: {}
        },
        _create: function () {
            var self = this, o = self.options,
                el = $(self.element)
                    .addClass("scrollable ui-widget")
                    .append($('<span class="up"><span class="ui-icon ui-icon-triangle-1-n" style="text-align:center;"></span></span><div class="container ui-widget-content"></div><span class="down"><span class="ui-icon ui-icon-triangle-1-s"></span></span>')),
                container = $('> .container', el);

            self.container = container;

            container.hover(function () {
                $(this).toggleClass('ui-state-focus');
            }).mousewheel(this, this._scroll);

            $('> span', el)
                .button()
                .mousedown($.proxy(this._start, this))
                .mouseup($.proxy(this._end, this))
                .mouseleave($.proxy(this._end, this))
                .find('.ui-icon')
                .each(function (i, ele) {
                    $(ele).position({ of: $(ele).parent() });
                });

            this._size.call(this, false);
            this._load.call(this, o.data);
        },
        _slider: function() {
            var self = this, o = self.options, container = self.container,
                client = container[0].clientHeight,
                scroll = container[0].scollHeight,
                slide = $('.slide', container)
                    .height(container.height()),
                slider = $('.slider', slide),
                top = slider.top();
                    
            if (scroll <= client) {
                slide.hide();

                return;
            }
            slider
                .height(client * (client / scroll))
                .top(top - container.prop('scrollTop'));
        },
        _load: function (data) {
            var self = this, o = self.options, el = $(self.element), container = self.container, width, margin;

            container
                .empty()
                .append('<div class="slide ui-widget-content"><div class="slider ui-widget-header"></div></div>');

            /* begin load */
            $.each(data, function () {
                var $d = this;
                $(String.format('<span class="item"><a href="{0}"><img class="image" alt=" " src="{1}" /><span class="text">{2}</span></a></span>', $d.href === '' ? 'javascript:' : $d.href, $d.img === '' ? ' ' : $d.img, $d.description))
                    .appendTo(container);
            });
            /* end load */

            self._slider();

            margin = {
                right: parseInt($('.item:first', container).css('margin-right').replace('px', '')),
                left: parseInt($('.item:first', container).css('margin-right').replace('px', ''))
            };

            width = container.outerWidth() - ((16 + (isNaN(margin.right) ? 0 : margin.right) + (isNaN(margin.left) ? 0 : margin.left)) * o.columns);

            $('.item', container)
                .width(width / o.columns)
                .hover(function () {
                    $(this).toggleClass('ui-state-highlight');
                });

            if (o.max > 0) {
                container.children().slice(o.max).detach();
            }
        },
        _size: function (resize) {
            var self = this, o = self.options, el = $(self.element), container = self.container, height = o.height;

            if (height === 'auto') {
                height = el.parent().outerHeight();
            }

            if (o.width !== 'auto' && !isNaN(o.width)) {
                el.width(opts.width);
            }

            container.siblings()
                .each(function (i, ele) {
                    height -= $(ele).outerHeight();
                });

            container.height(height);
        },
        _start: function (e) {
            var $t = e.target, o = this.options, ctrl = this;

            if (!$($t).is('.ui-button')) {
                $t = $($t).parents('.ui-button:first');
            }

            this.interval = setInterval($.proxy(ctrl._scroll, $t, e, ctrl), o.interval);
        },
        _end: function (e) {
            clearInterval(this.interval);
        },
        _scroll: function (event, ctrl) {
            var $t = this, dir, ctrl = $($t).is('.ui-button') ? ctrl : event.data, container = ctrl.container, max = $(container).prop('scrollHeight') - $(container).outerHeight(), current = $(container).prop('scrollTop'), o = ctrl.options, top = 0;

            if ($($t).is('.ui-button')) {
                dir = $($t).is('.up') ? -1 : 1;
            } else {
                dir = -event.deltaY;
            }

            top = current + (dir * o.step);

            if (max < 0 || top > max) {
                return true;
            }

            $(container).prop('scrollTop', top >= max ? max : top);

            ctrl._slider();

            return false;
        }
    });
} (jQuery));